
import 'package:flutter/material.dart';
import 'package:yp/config/config.dart';
import 'package:get/get.dart';

import 'logic.dart';

class MyWelfareCardListPage extends StatefulWidget {
  @override
  _MyWelfareCardListPageState createState() => _MyWelfareCardListPageState();
}

class _MyWelfareCardListPageState extends State<MyWelfareCardListPage> with SingleTickerProviderStateMixin {

  final logic = Get.put(MyWelfareCardListLogic());
  final state = Get.find<MyWelfareCardListLogic>().state;

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Config.mainColor,
        brightness: Brightness.light,
        iconTheme: IconThemeData(color: Colors.white),
        title: Text("礼品卡"),
        centerTitle: true,
      ),
      body: GetBuilder<MyWelfareCardListLogic>(
        builder: (logic) {
          return Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              elevation: 0,
              backgroundColor: Colors.white,
              title: TabBar(
                controller: _tabController,
                labelColor: Color(0xFFC99F4F),
                unselectedLabelColor: Color(0xFF999999),
                indicatorSize: TabBarIndicatorSize.label,
                indicatorColor: Color(0xFFC99F4F),
                labelStyle: TextStyle(fontSize: 16),
                labelPadding: EdgeInsets.zero,
                tabs: [
                  Tab(
                    child: Text("有效"),
                  ),
                  Tab(
                    child: Text("失效"),
                  ),
                ],
              ),
            ),
            body: TabBarView(
              controller: _tabController,
              children: [
                _efficientWelfareCardList(logic),
                _invalidationWelfareCardList(logic)
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _efficientWelfareCardList(MyWelfareCardListLogic logic) {
    return logic.state.efficientWelfareCardList.length > 0
        ? Container(
      child: ListView.separated(
        padding: EdgeInsets.symmetric(vertical: 10),
        shrinkWrap: true,
        itemCount: state.efficientWelfareCardList.length,
        itemBuilder: (BuildContext context, int index) {
          return _buildEfficientWelfareCardWidget(logic.state.efficientWelfareCardList[index]);
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider(height: 10, color: Colors.transparent);
        },
      ),
    )
        : Container(
            child: Center(
              child: Text("暂无礼品卡"),
            )
          );
  }

  Widget _invalidationWelfareCardList(MyWelfareCardListLogic logic) {
    return logic.state.invalidationWelfareCardList.length > 0 
        ? Container(
      child: ListView.separated(
        padding: EdgeInsets.symmetric(vertical: 10),
        shrinkWrap: true,
        itemCount: state.invalidationWelfareCardList.length,
        itemBuilder: (BuildContext context, int index) {
          return _buildEfficientWelfareCardWidget(logic.state.invalidationWelfareCardList[index]);
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider(height: 10, color: Colors.transparent);
        },
      ),
    )
        : Container(
            child: Center(
              child: Text("暂无礼品卡"),
            )
          );
  }

  Widget _buildEfficientWelfareCardWidget(Map card) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Card(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.all(10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Stack(
                  children: [
                    Image.asset("assets/images/welfare_card_cover.jpeg"),
                    Positioned(
                      bottom: 20,
                      right: 20,
                      child: Container(
                        child: Text(
                          "￥${card["money_available"]}",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 24
                          ),
                        ),
                      ),
                    ),
                  ],
                )
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 15, bottom: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Row(
                      children: [
                        Text(
                          "壹品慧福利卡",
                          style: TextStyle(
                            fontSize: 14
                          ),
                        ),
                        if (card['status'] == 3)
                          Text(
                            "${card['status'] == 3 ? '(已冻结)' : ''}",
                            style: TextStyle(
                              color: Color(0xffc4000e),
                              fontSize: 14,
                            ),
                          ),
                      ],
                    ),
                  ),
                  Container(
                    child: Text(
                      "卡号：${card["card_no"]}",
                      style: TextStyle(
                        fontSize: 14
                      ),
                    ),
                  ),
                  Container(
                    child: Text(
                      "有效时间：${card["expire_dtme"]}",
                      style: TextStyle(
                        color: Color(0xFFCCCCCC),
                        fontSize: 14
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
